<!DOCTYPE HTML>
<html>
    <head>
        <title>Canvas绘图</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="index.css" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/type.js"></script>
        <script type="text/javascript" src="js/draw_shape.js"></script>
        <script type="text/javascript" src="js/draw_img.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </head>
    <body>
    	<div id="menu">
    		<div id="shape_content">
    			<div id="shape_label">
    				形状：
    			</div>
    			<div id="shape_ul">
    				<ul id="shape">
    					<li><img id="line_button" class="unselected_shape" src="imgs/line.jpg" /></li>
    					<li><img id="circle_button" class="unselected_shape" src="imgs/circle.jpg" /></li>
    					<li><img id="rectangle_button" class="unselected_shape" src="imgs/rectangle.jpg" /></li>
    				</ul>
    			</div>
    		</div>
    		<div id="img_content">
    			<div id="open_img">
    				<img src="imgs/open_img_button_normal.jpg" />
    			</div>
    			<div id="clip_img">
    				<img src="imgs/clip_img_button_normal.jpg" />
    			</div>
    			<div id="operate_img">
    				<div id="move_img">
    					<img src="imgs/move_img_normal.jpg" />
    				</div>
    				<div id="scale_img">
    					<img src="imgs/enlarge_img_normal.jpg" />
    				</div>
    				<div id="rotate_img">
    					<img src="imgs/rotate_img_normal.jpg" />
    				</div>
    			</div>
    		</div>
    		<div id="color_content">
    			<div id="color_table">
    				<table>
    					<tr>
    					    <th>颜色选择：</th>
    						<td class="color_box" style="background-color: black">
    						</td>
    						<td class="color_box" style="background-color: white">
    						</td>
    						<td class="color_box" style="background-color: blue">
    						</td>
    						<td class="color_box" style="background-color: yellow">
    						</td>
    						<td class="color_box" style="background-color: green">
    						</td>
    						<td class="color_box" style="background-color: red">
    						</td>
    						<td class="color_box" style="background-color: purple">
    						</td>
    						<td class="color_box" style="background-color: fuchsia">
    						</td>
    					</tr>
    					<tr>
    					    <th>当前颜色：</th>
    					    <td id="current_color" class="color_box" style="background-color: black"> 
    					    </td>
    					</tr>
    				</table>
    			</div>
    			<div id="more_color">
    				<img src="imgs/more_color_normal.jpg" />
    			</div>
    		</div>
    		<div id="clear">
    			<img src="imgs/clear_canvas_normal.jpg" />
    		</div>
    	</div>
    	<div id="canvas">
    		<canvas id="canvas_content" width="1152" height="648">
    		</canvas>
    	</div>
    	<div id="colors">
    	    <table id="colors_table">
    	    </table>
    	</div>
    	<div id="open_img_back">
    	</div>
    	<div id="open_img_content">
    		<table>
    			<tr>
    				<td id="path_text_label">请输入图片路径：</td>
    				<td><input type="text" id="path_text" value="如：D:/img.jpg"/></td>
    			</tr>
    			<tr>
    				<td><img id="confirm_open" src="imgs/confirm_normal.jpg" /></td>
    				<td><img id="cancel_open" src="imgs/cancel_normal.jpg" /></td>
    			</tr>
    		</table>
    	</div>
    	<div id="select_move_img" class="select_img">
    		<table>
    			<tr>
    				<td class="select_label">选择图片：</td>
    				<td>
    					<select id="move_content" class="select_content">    				
    					</select>
    				</td>
    			</tr>
    			<tr>
    				<td>
    					<img id="move_confirm" class="operate_confirm" src="imgs/confirm_normal.jpg" />
    				</td>
    				<td>
    					<img class="operate_cancel" src="imgs/cancel_normal.jpg" />
    				</td>
    			</tr>
    		</table>
    	</div>
    	<div id="select_scale_img" class="select_img">
    		<table>
    			<tr>
    				<td class="select_label">选择图片：</td>
    				<td>
    					<select id="scale_content" class="select_content">    				
    					</select>
    				</td>
    			</tr>
    			<tr>
    				<td>
    					<img id="scale_confirm" class="operate_confirm" src="imgs/confirm_normal.jpg" />
    				</td>
    				<td>
    					<img class="operate_cancel" src="imgs/cancel_normal.jpg" />
    				</td>
    			</tr>
    		</table>
    	</div>
    	<div id="select_rotate_img" class="select_img">
    		<table>
    			<tr>
    				<td class="select_label">选择图片：</td>
    				<td>
    					<select id="rotate_content" class="select_content">    				
    					</select>
    				</td>
    			</tr>
    			<tr>
    				<td>
    					<img id="rotate_confirm" class="operate_confirm" src="imgs/confirm_normal.jpg" />
    				</td>
    				<td>
    					<img class="operate_cancel" src="imgs/cancel_normal.jpg" />
    				</td>
    			</tr>
    		</table>
    	</div>
    </body>
</html>